<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="zh">
<head>
    <title>Chat</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
            crossorigin="anonymous"></script>
    <script src="/myfiles/js/websocketconfig.js?v=1.0.2"></script>
    <script src="/myfiles/js/websocketutil.js?v=1.0.0"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>
<body>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title text-center">CHAT</h3>
        </div>
        <div class="panel-body">
            <!-- List group -->
            <ul class="list-group" id="chat-message">

            </ul>
        </div>
        <div class="panel-footer">
            <div class="input-group">
                <input type="text" class="form-control" aria-label="..." id="chat-body" value="1111">
                <div class="input-group-btn">
                    <button type="button" id="chat-send" class="btn btn-default">发送</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    var currentSession = '${send}';
    var accept = '${accept}';
    var webSocket;

    /**
     * 发送消息，组装
     * @param msg
     * @param receiver
     * @param group
     * @param type
     * @param cmd
     */
    var sendMsg = function (msg, receiver, group, type, cmd) {
        var message = {};
        var browser = BrowserUtil.info();
        message.version = "1";
        message.deviceId = "1";
        message.cmd = cmd;
        //系统用户组
        message.sender = currentSession;
        //好友ID
        message.receiver = receiver;
        message.groupId = group;
        message.token = currentSession;
        message.type = type;
        message.flag = 1;
        message.platForm = browser.name;
        message.platFormVersion = browser.version;
        message.token = "token";
        message.appKey = "sniper";
        message.timeStamp = "1";
        message.sign = "sniper";

        var content = {};
        content.content = msg;
        content.type = 0;
        message.content = JSON.stringify(content);
        console.log(JSON.stringify(message));
        webSocket.send(JSON.stringify(message));
    };

    /**
     * 发送消息事件
     */
    function doSend() {
        if (webSocket.readyState === webSocket.OPEN) {
            var msg = $("#chat-body").val();
            if (!msg) {
                return;
            }
            //$("#chat-body").val("");
            sendMsg(msg, accept, "", 1, 5);
        } else {
            $("#chat-message").append("<li class='list-group-item text-center'>WebSocket 连接创建失败</li>");
        }
    }

    /**
     * 具体操作
     */
    var initEventHandle = function () {

        webSocket.onopen = function (openEvt) {
            sendMsg(currentSession + " - 上线了", "", "", 1, 1);
            $("#chat-message").append("<li class='list-group-item text-center'>WebSocket 已连接</li>");
        };

        webSocket.onmessage = function (evt) {
            console.log("accpet ：" + evt.data);
            var message = JSON.parse(evt.data);
            var messageBody = JSON.parse(message.content);
            var textPos = "text-left";
            if (message.sender === currentSession) {
                textPos = "text-right";
            }
            $("#chat-message").append("<li class='list-group-item " + textPos + "'>" + messageBody.content + "</li>");
        };

        webSocket.onerror = function () {
            reconnect(websocketurl, initEventHandle);
            $("#chat-message").append("<li class='list-group-item text-center'>WebSocket 服务错误</li>");
        };

        webSocket.onclose = function () {
            $("#chat-message").append("<li class='list-group-item text-center'>WebSocket 已关闭</li>");
        };

        window.close = function () {
            webSocket.onclose();
        };

    };

    $().ready(function () {
        /**
         * 初始化
         */
        createWebSocket(websocketurl, initEventHandle);


        $("#chat-send").on("click", function () {
            doSend();
        });
    })


</script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>
</html>